<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <link rel="shortcut icon" th:href="@{/icon/java.svg}" type="image/x-icon"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" th:href="@{/plug/editor.md-master/css/editormd.css}"/>
    <script th:src="@{/plug/editor.md-master/lib/marked.min.js}"></script>
    <script th:src="@{/plug/editor.md-master/lib/prettify.min.js}"></script>
    <script th:src="@{/plug/editor.md-master/lib/raphael.min.js}"></script>
    <script th:src="@{/plug/editor.md-master/lib/underscore.min.js}"></script>
    <script th:src="@{/plug/editor.md-master/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/plug/editor.md-master/lib/flowchart.min.js}"></script>
    <script th:src="@{/plug/editor.md-master/editormd.min.js}"></script>
    <script th:src="@{/myjs/addsvg.js}"></script>
    <script th:src="@{/js/viewer.min.js}"></script>
    <link th:href="@{/css/viewer.min.css}" rel="stylesheet">


</head>
<body>
<div th:replace="header::html"></div>
<div class="container" id="MainBodyShow" style="margin-top: 10px;margin-bottom: 10px">
    <div class="card p-3 bg-white rounded" id="articleCard" style="border: none">
        <div class="card-body border-bottom">
            <h1 id="articleTitle"></h1>
            <p class="card-text">
                <small class="text-muted" id="articleSvg"></small>
            </p>
        </div>
        <div class="card-body">
            <div id="layout" class="editor">
                <div id="test-editormd">
                    <textarea></textarea>
                </div>
            </div>
        </div>
        <div class="card-body">
            <form class="mb-3">
                <div class="form-group">
                    <textarea class="form-control border border-primary" aria-label="With textarea"
                              id="articleCommentContent"></textarea>
                    <div class="invalid-feedback">
                        评论长度不能大于100也不能为空
                    </div>
                </div>
                <div class="form-group">
                    <a href="#" class="btn btn-primary disabled" role="button" id="addArticleComment"
                       style="float: right">发表评论</a>
                </div>
            </form>

        </div>
    </div>
    <div class="card mb-3 p-3 bg-white rounded" style="border: none" id="commentTableList">
        <div class="card-body">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#commentsLists" role="tab"
                       aria-controls="home" aria-selected="true">评论</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane show active" id="commentsLists" role="tabpanel" aria-labelledby="home-tab">
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="ReplyComment" tabindex="-1" role="dialog" aria-labelledby="ReplyCommentTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ReplyCommentTitle">回复</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="mb-3">
                    <div class="form-group">
                    <textarea class="form-control border border-primary" aria-label="With textarea"
                              id="ReplyCommentContent"></textarea>
                        <div class="invalid-feedback">
                            评论长度不能大于100也不能为空
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="ReplyCommentSend">发表回复</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer::html"></div>
<script th:inline="javascript">
    var articleID = [[${articleID}]];
    var userID = [[${userId}]];
</script>
<script th:src="@{/myjs/header.js}"></script>
<script>
    function getReplyComments(replyCommentList) {
        var appendHtml = '';
        for (var i in replyCommentList) {
            var replyCom = replyCommentList[i];
            appendHtml = appendHtml + '<div class="media mt-3"><a class="align-self-start" href="#"><img src="' + replyCom.user.image + '" class="mr-3" style="height: 40px;width: 40px;"></a>' +
                '<div class="media-body ml-3"><h5 class="mt-0">' + replyCom.user.username + '<small class="text-muted" style="float: right">' + replyCom.createTime + '<a href="javascript:showReplyCommentDialog(' + replyCom.commentId + ',' + replyCom.replyUserId + ');">回复</a></small></h5>' +
                replyCom.content + '</div></div>';
        }
        return appendHtml;
    }

    $("#articleCard").hide();
    $(document).ready(function () {
        $.post("/article/getArticle",
            {
                articleId: articleID
            },
            function (data, status) {
                if (data && status == 'success') {
                    $("#articleTitle").text(data.title);
                    $(document).attr("title", data.title);
                    var testEditor = editormd.markdownToHTML("test-editormd", {
                        markdown: data.content,
                        atLink: false,    // disable @link
                        htmlDecode: "style,script,iframe",  // you can filter tags decode
                        emoji: false,
                        atLink: false,    // disable @link
                        taskList: true,
                        tocm: true,         // Using [TOCM]
                        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                    });
                    $("#articleCard").show();
                    $("#articleSvg").append(addUser(data.author.username, data.author.id) + addDate(data.publishDate) + addLikes(data.likes));
                    $(function () {
                        $("#MainBodyShow img").click(function () {
                            showImage($(this)[0].src)
                        })
                    });
                } else {
                    window.location.href = "/404";
                }
            });
        $.post("/comments/getComments", {
            articleId: articleID
        }, function (data, status) {
            console.log(data);
            if (data) {
                var appendHtml = '';
                if (data.length == 0) {
                    $("#commentTableList").hide();
                } else {
                    for (var i in data) {
                        var comments = data[i];
                        console.log(comments.content);
                        appendHtml += '<div class="media mt-3 border-bottom"><img src="' + comments.user.image + '" class="align-self-start" style="height: 40px;width: 40px;"><div class="media-body ml-3">' +
                            '<h5 class="mt-0">' + comments.user.username + '<small class="text-muted" style="float: right">' + comments.createTime + '<a href="javascript:showReplyCommentDialog(' + comments.id + ',' + comments.commentUserId + ');">回复</a></small></h5>' +
                            comments.content + '' +
                            getReplyComments(comments.replyCommentList) + '</div></div>';
                    }
                    $("#commentsLists").append(appendHtml);
                }

            }
        });
        if (userID == -1) {
            $("#articleCommentContent").attr("disabled", "disabled");
            $("#articleCommentContent").text("登录后发表评论");
        }
    });
    $("#addArticleComment").click(function () {
        if ($("#articleCommentContent").val() != "" && $("#articleCommentContent").val().length <= 100) {
            $.post("/comments/addComments", {
                articleId: articleID,
                content: $("#articleCommentContent").val()
            }, function (data, status) {
                if (data) {
                    window.location.reload();
                }
            });
        }
    });
    $("#ReplyCommentSend").click(function () {
        if ($("#ReplyCommentContent").val() != "" && $("#ReplyCommentContent").val().length <= 100) {
            addReplyComment($("#ReplyCommentContent").val());
        }

    });
    $("#articleCommentContent").bind("input propertychange", function () {
        if ($("#articleCommentContent").val().length <= 100 && $("#articleCommentContent").val() != "") {
            if ($("#articleCommentContent").hasClass("is-invalid")) {
                $("#articleCommentContent").removeClass("is-invalid");
            }
            if ($("#addArticleComment").hasClass("disabled"))
                $("#addArticleComment").removeClass("disabled");
        } else {
            if (!$("#articleCommentContent").hasClass("is-invalid")) {
                $("#articleCommentContent").addClass("is-invalid");
            }
            if (!$("#addArticleComment").hasClass("disabled"))
                $("#addArticleComment").addClass("disabled");
        }
    });
    $("#ReplyCommentContent").bind("input propertychange", function () {
        if ($("#ReplyCommentContent").val().length <= 100 && $("#ReplyCommentContent").val() != "") {
            if ($("#ReplyCommentContent").hasClass("is-invalid")) {
                $("#ReplyCommentContent").removeClass("is-invalid");
            }
            if ($("#ReplyCommentSend").hasClass("disabled"))
                $("#ReplyCommentSend").removeClass("disabled");
        } else {
            if (!$("#ReplyCommentContent").hasClass("is-invalid")) {
                $("#ReplyCommentContent").addClass("is-invalid");
            }
            if (!$("#ReplyCommentSend").hasClass("disabled"))
                $("#ReplyCommentSend").addClass("disabled");
        }
    });
    var commentIdCurrent, repliedUserIdCurrent;

    function addReplyComment(content) {
        $.post("/comments/addReplyComment", {
            articleId: articleID,
            commentId: commentIdCurrent,
            repliedUserId: repliedUserIdCurrent,
            content: content
        }, function (data, status) {
            if (data) {
                window.location.reload();
            }
        });
    }

    function showReplyCommentDialog(commentId, repliedUserId) {
        if (userID != -1) {
            commentIdCurrent = commentId;
            repliedUserIdCurrent = repliedUserId;
            $("#ReplyComment").modal("show");
        } else {

        }

    }
</script>
<script>
    readUserInfo();
</script>
</body>
</html>